<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 访问前 */
    a:link {
        color: black;
    }
    /* 访问后 */
    a:visited {
        color: yellow;
    }
    /* 鼠标悬停 */
    a:hover {
        color: red;
    }
    /* 点击时 */
    a:active {
        color: aqua;
    }

    /* 实际工作中可能只有两个 */
    /* a {}
    a:hover {
        color: rebeccapurple;
    } */
</style>
<body>
    <a href="#">鼠标经过超链接变色</a>
</body>

</html>